<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <div class="container">
        <br />
        <div class="row">
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'><button type="submit" class="form-control btn btn-info" id='logout'>logout</button></div>
        </div>
        <br />
        <br />
        <br />   
        <nav class="nav nav-pills nav-justified">
            <a class="nav-item nav-link" href="main.html">任务管理</a>
            <a class="nav-item nav-link" href="client.html" id='client-manage'>接入子系统管理</a>
            <a class="nav-item nav-link active" href="user.html" id="user-manage">用户管理</a>
            <a class="nav-item nav-link" href="history.html">任务运行历史</a>
          </nav>
        <br />
        <hr />
        <br />
        <form id='user-submit' method="POST">
            <div class="form-row">
              <div class="col-md-4 mb-3">
                <label for="userId">用户id</label>
                <input type="text" class="form-control" id="userId" name='userId' required>
              </div>
              <div class="col-md-4 mb-3">
                <label for="username">用户中文名</label>
                <input type="text" class="form-control" id="username" name="username" required>
              </div> 
              <div class="col-md-4 mb-3">
                <label for="password">密码（不更改不需要填写）</label>
                <input type="password" class="form-control" id="password" name="password">
              </div>
              <div class="col">
                <label for="systemId">所属系统</label>
                <select id="systemId" name="systemId" class="form-control" required>
                    <option value="" selected disabled>Choose here</option>
                </select>
              </div>
              <div class="col">
                <label for="role">角色权限</label>
                <select id="role" name="role" class="form-control" required>
                    <option value="" selected disabled>Choose here</option>
                    <option value="ADMIN">管理员</option>
                    <option value="OPERATOR">操作员</option>
                    <option value="VISITOR">访问者</option>
                </select>
              </div>             
            </div>       
            <button class="btn btn-primary" type="submit" id='submit'>Submit form</button>
        </form>
</body>
<script src="script/jquery-3.0.0.min.js"></script>
<script src="script/util.js"></script>
<script>
'use strict';
(function(){
    var url = new URL(window.location.href);
    var id = url.searchParams.get('id');

    getAllSystemId(function(list) {
        list.forEach(function(value, idx) {
            $('#systemId').append("<option value='" + value.systemId + "'>"+value.systemId+"</option>");
        });
    });

    if(id) {
        $.ajax({
            url:'/admin/user-account/detail/' + id,
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"GET",
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    var result = response.data;
                    $('#userId').val(result.userId).prop("readonly", true);
                    $('#username').val(result.userName);
                    $('#systemId').val(result.clientInfo.systemId);
                    $('#role').val(result.role);
                }else {
                    alert(response.message);
                }
                
            }
        });
    }

    $('#user-submit').submit(function(e) {
        // if ($('#password').val() !== $('#password2').val()) {
        //     document.getElementById('password').setCustomValidity('Password Must be Matching.');
        //     document.getElementById('password2').setCustomValidity('Password Must be Matching.');
        //     return false;
        // } else {
        //     input.setCustomValidity('');
        //     document.getElementById('password').setCustomValidity('');
        //     document.getElementById('password2').setCustomValidity('');
        // }

        e.preventDefault();
        var data = {
            idUserAccount: id,
            userId: $('#userId').val(),
            userName: $('#username').val(),
            password: $('#password').val(),
            systemId: $('#systemId').val(),
            role: $('#role').val()                
        };
        $.ajax({
            url:'/admin/user-account/save',
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"POST",
            data: JSON.stringify(data),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    window.location.href = 'user.html';
                }else {
                    alert(reponse.message);
                }
                
            }
        });
    })

   //bottom     
})();
</script>
</html>